<template>
  <div class="course-row" @click.stop="goCoursePage">
    <div class="left-container">
      <div class="cover">
        <img :src="info.series_cover" alt="" />
      </div>
    </div>
    <div class="right-container">
      <div class="course-title">{{ info.series_name }}</div>
      <div class="span-list text-grey mt-10">
        <span v-for="(item, index) in spanList" :key="index">{{ item }}</span>
      </div>
      <div class="course-speed text-grey" v-if="auth">{{ watchLog }}</div>
      <div class="course-try" v-else>免费试学</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseRow',
  data() {
    return {
      spanList: [],
      // 阅读记录
      watchLog: '',
      // 上次观看的课程id
      courseId: '',
    };
  },
  props: {
    auth: {
      type: Number,
      default: 0,
    },
    isWindowShow: {
      type: Boolean,
      default: true,
    },
    sid: {
      type: String,
      default: '',
    },
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    isWindowShow(newVal) {
      // onshow时重新查询记录
      if (newVal && this.auth) {
        this.getSession();
      }
    },
    info: {
      handler(newVal) {
        //执行代码
        if (newVal) {
          this.formatData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    formatData() {
      if (this.info.tags) {
        this.spanList = this.info.tags.split(',');
      }
      if (this.auth) {
        this.watchLog = `视频｜${this.info.course_size}节`;
        this.getSession();
      }
    },
    getSession() {
      const userId = window.getUserid();
      if (userId) {
        let log = window.localStorage.getItem(`${userId}-wealth_key-log`);
        log = _t.jsonPase(log);
        if (log && log.length) {
          log.forEach(e => {
            if (e.seq === String(this.info.theme_id)) {
              this.courseId = e.courseId;
              this.watchLog = `已学习${e.index}/${this.info.course_size}节`;
            }
          });
          this.$forceUpdate();
        }
      }
    },
    goCoursePage() {
      // 跳转课程详情
      const courseId = this.courseId ? `&courseId=${this.courseId}` : '';
      const url = `${_Global.api.home}investCourse?seq=${this.info.theme_id}&sid=${this.sid}${courseId}&showTitle=true`;
      if (this.auth) {
        window.statConf.click('course.click');
      } else {
        window.statConf.click('course_presale.click');
      }
      _t.jumpVideoPlayPage(url);
    },
  },
};
</script>

<style lang="less" scoped>
.course-row {
  display: flex;
  height: 1.26rem;
}
.left-container {
  width: 2.24rem;
  margin-right: 0.16rem;
  .cover {
    width: 2.24rem;
    height: 1.26rem;
    border-radius: 0.08rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.right-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  .course-title {
    max-width: 4.4rem;
    height: 0.36rem;
    font-size: 0.28rem;
    line-height: 0.36rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .span-list {
    display: flex;
    span {
      margin-right: 0.1rem;
      line-height: 0.28rem;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 0.04rem;
      padding: 0 0.06rem;
      font-size: 0.2rem;
      font-weight: 400;
      box-sizing: border-box;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .course-speed {
    height: 0.3rem;
    font-size: 0.24rem;
    line-height: 0.3rem;
    padding-top: 0.2rem;
    flex-shrink: 1;
  }
  .course-try {
    height: 0.3rem;
    font-size: 0.24rem;
    line-height: 0.3rem;
    padding-top: 0.2rem;
    flex-shrink: 1;
    color: #ff2436;
  }
}
</style>
